<!-- 待办事项 组件 -->

<template>
	<view class="">
		
	
	<!-- 组件大块 -->
	<focus-box 
		mode="col" 
		width="750" 
		bg="#F7F7F7" 
		justify="start" 
		align="center"
		v-if="state.isDraw" 
		
	>
		<focus-box
			width="750"
			height="24"
		/>
		<!-- 待办事项块 -->
		<view :class="person==1 ? 'thing-todo-block-show-admin' : 'thing-todo-block-show-work'">
			<!-- 文字信息容器 -->
			<focus-box 
				mode="col" 
				width="480" 
				padding="24" 
				align="start"
				justify="center" 
			>
				<!-- 标题文字容器 -->
				<focus-box 
					mode="row" 
					justify="start" 
					align="center"
				>
					<!-- 课程类标签 -->
					<block v-if="things.type==3">
						<!-- 必修标签 -->
						<!-- <tag-course 
							:text="things.label"
							:type="things.isMust" 
						></tag-course> -->
						<u-tag :text="things.label" type="warning" size="mini" />
					</block>
					<!-- 其它类型标签 -->
					<block v-else>
						<!-- 必修标签 -->
						<!-- <tag-course 
							type="1" 
							:text="things.label"
						></tag-course> -->
						<u-tag :text="things.label" type="error" size="mini" />
					</block>
					<!-- 间隔 -->
					<focus-box 
						width="16" 
						height="10"
					></focus-box>
					<!-- 标题文字 -->
					<focus-text 
						:text="things.title"
						lines="1" 
						size="30" 
						color="black" 
						weight="bold" 
					></focus-text>
				</focus-box>
				<!-- 中间间距 -->
				<focus-box width="16" height="16"></focus-box>
				<!-- 备注文字 -->
				<focus-text 
					:text="things.remark"
					lines="1" 
					mode="remark" 
				></focus-text>
			</focus-box>
			<!-- 按钮容器 -->
			<focus-box 
				:padding="[0,24,0,0]" 
				mode="col" 
				width="200" 
				align="end"
				justify="center" 
			>
				<!-- 继续学习按钮 -->
				<focus-box 
					:padding="[0,27]"
					:bg="person==1 ? 'primary' : '#FD8B35'"
					mode="row" 
					height="58" 
					radius="29"
					align="center" 
					justify="center" 
					@click="dothingClick"
				>
					<focus-text 
						size="24" 
						color="white" 
						:text="things.btnText"
					></focus-text>
				</focus-box>
			</focus-box>
		</view>
		<!-- 底部间隔 -->
		<view  style="height: 24rpx;background-color: #F7F7F7;"></view>
	</focus-box>
	</view>
	
	
</template>


<script>
	// 接口请求文件引入
	import request from '@/common/js/request/userInfo.js';
	import { routerParamUrl } from '@/common/js/public/utils.js'
	import tagCourse from '@/pagesB/components/tag-course/tag-course.vue';
	
	/**
	 * 待办事项组件
	 * @description 待办事项组件，杜先生开发
	 * @property {String} tag 组件标识，默认：thing-todo
	 * @property {String,Number} person = [1|2] 身份类型，默认：2
	 *   @value 1 管理人员
	 *   @value 2 作业人员，默认
	 *   @value 3 监督人员
	 * @property {String} random 随机字符串
	 * @event {Function()} finished 接口请求执行完毕
	 * @event {Function()} logintouch 登录事务触发
	 */
	export default {
		name: 'thing-todo',
		props: {
			tag: { type: String, default: 'thing-todo' },
			person: { type: [String,Number], default: 2 },
			random: { type: String, default: '' },
			showType: { type: Number, default: 2 },
			//传进来的showType=1说明是学习页面只显示课程学习记录的代办
			//showType=2  是首页的代办除了课程学习记录都显示
		},
		components: {
			tagCourse
		},
		// 页面数据
		data() {
			return {
				// 状态信息
				state: {
					isDraw: false, // 是否显示组件
					isQuestion: false, //是否填写问卷
					examArray: {}
				},
				// 待办事项信息
				things: {
					id: 1, // 待办事项id
					type: 0, // 待办事项类型：1-登录事务 2-实名事务 3-课程事务 0-其他事务
					label: '', // 标签文本
					title: '', // 事项标题
					btnText: '', // 按钮上面的文字
					path: '', // 跳转url地址
					remark: '', // 备注说明
					isMust: 1, // 必/选修 (type=3时携带)
				},
			}
		},
		// 数据监听
		watch: {
			// 随机字符串 改变了
			random: {
				handler(newV, oldV) {
					if (newV && newV.length>=6) {
						// 重新请求接口
						this.thingsWillGoReq();
					}
				},
				immediate: true,
			}
		},
		
		// 页面事件
		methods: {
			
			// ============================================= 元素事件
			// 办事按钮 点击
			dothingClick() {
				// 如果是登录事务
				if (this.things.type == 1){
					// 登录处理 回父
					this.$emit('logintouch', { "tag": this.tag });
				} else if (this.things.type == 4){
					//准考证
					if (!this.state.isQuestion) {
						let examObj = {
							...this.examArray,
							examineeId:this.things.id
						}
						const urlP = routerParamUrl(examObj)
						uni.navigateTo({ 
							url: `/pagesB/pages/learning/questionnaireSurvey/index?${urlP}`
						})
					}else{
						uni.navigateTo({
							// url: `${this.things.path}?examineeId=${this.things.id}`
							url: `/pagesB${this.things.path}?examineeId=${this.things.id}`  // 2.8.0
						})
					}
				}else if (this.things.type == 5){ // 强制实名
					// 跳转到后端设置的地址
					// uni.$focus.pageJump(this.things.path);
					uni.$focus.pageJump(`/pagesB${this.things.path}`); // 2.8.0
				} else if (this.things.path){// 其它跳转类事务
					// 跳转到后端设置的地址
					uni.$focus.pageJump(`/pagesB${this.things.path}`, this.things.id); // 2.8.0
				}else {// 错误提示
					uni.showToast({
						title: '未发现地址',
						icon: 'none',
						duration: 2500
					});
				}
			},
			// ============================================= 接口请求
			// 待办事项
			thingsWillGoReq() {
				request.thingsWillGo({
					fail: () => {
						// 请求执行完毕
						this.$emit('finished', { "tag": this.tag });
					},
					success: (res) => {
						this.examArray = res.info.examArray
						this.state.isQuestion = res.info.isQuestion
						// 待办事项信息 赋值
						this.things = res.info; 
						// 如果待办存在，渲染组件
						if (res.info.title) { 
							//传进来的showType=1说明是学习页面只显示课程学习记录的代办
							//showType=2  是首页的代办除了课程学习记录都显示
							if(this.showType === 1){
								this.things.type == 3 ? (this.state.isDraw = true) : (this.state.isDraw = false)
							}else{
								this.things.type != 3 ? (this.state.isDraw = true) : (this.state.isDraw = false)
							}
						}else {	// 否则隐藏组件
							this.state.isDraw = false; 
						}
						// 请求执行完毕
						this.$emit('finished', { "tag": this.tag });
					}
				});
			},
			
		},
		
	}
</script>


<style>
	/* 待办事项块 - 管理人员 */
	.thing-todo-block-show-admin{
		width: 702rpx; height: 160rpx;
		display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 50%, rgba(74, 160, 253, 0.19) 100%);
		 border-radius: 12rpx;
		box-shadow: 0px 4px 20px 0px rgba(139,149,173,0.11)
	}
	/* 待办事项块 - 作业人员 */
	.thing-todo-block-show-work{
		width: 686rpx; height: 160rpx;
		display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 50%,rgba(253, 139, 53, 0.3)  100%);
		 border-radius: 12rpx;
		 box-shadow: 0px 4px 20px 0px rgba(139,149,173,0.11)
	}
</style>